<template>
  <div class="order">
    <div class="title">饿了么</div>
    <div class="option">
        <span :class="{active:suoyin==index}" v-for="(item,index) in arr" :key="index" @click="handleClick(index)">{{item}}</span>
    </div>
    <div class="tasklist">
        <div class="item">
            <div class="first">
                <span class="name">纯手工饺子（凤城九路店）> </span>
                <span>已送达</span>
            </div>
            <div class="second">
                <div class="pic">
                    <img src="" alt="">
                    <img src="" alt="">
                </div>
                <div class="price">
                    <div class="jiage">￥17.8</div>
                    <div class="count">共2件</div>
                </div>
            </div>
            <div class="third">再来一单</div>
        </div>
        <div class="item">
            <div class="first">
                <span class="name">唐久便利（海荣名城店）> </span>
                <span>已送达</span>
            </div>
            <div class="second">
                <div class="pic">
                    <img src="" alt="">
                    <img src="" alt="">
                    <img src="" alt="">
                </div>
                <div class="price">
                    <div class="jiage">￥17.8</div>
                    <div class="count">共2件</div>
                </div>
            </div>
            <div class="third">再来一单</div>
        </div>
        <div class="item">
            <div class="first">
                <span class="name">美益水果（北美店）></span>
                <span>已送达</span>
            </div>
            <div class="second">
                <div class="pic">
                    <img src="" alt="">
                    <img src="" alt="">
                </div>
                <div class="price">
                    <div class="jiage">￥17.8</div>
                    <div class="count">共2件</div>
                </div>
            </div>
            <div class="third">再来一单</div>
        </div>
        <div class="item">
            <div class="first">
                <span class="name">美益水果（北美店）></span>
                <span>已送达</span>
            </div>
            <div class="second">
                <div class="pic">
                    <img src="" alt="">
                    <img src="" alt="">
                </div>
                <div class="price">
                    <div class="jiage">￥17.8</div>
                    <div class="count">共2件</div>
                </div>
            </div>
            <div class="third">再来一单</div>
        </div>
        <div class="item">
            <div class="first">
                <span class="name">美益水果（北美店）></span>
                <span>已送达</span>
            </div>
            <div class="second">
               <div class="pic">
                    <img src="" alt="">
                    <img src="" alt="">
                </div>
                <div class="price">
                    <div class="jiage">￥17.8</div>
                    <div class="count">共2件</div>
                </div>
            </div>
            <div class="third">再来一单</div>
        </div>
        <div class="item">
            <div class="first">
                <span class="name">美益水果（北美店）></span>
                <span>已送达</span>
            </div>
            <div class="second">
                <div class="pic">
                    <img src="" alt="">
                    <img src="" alt="">
                </div>
                <div class="price">
                    <div class="jiage">￥17.8</div>
                    <div class="count">共2件</div>
                </div>
            </div>
            <div class="third">再来一单</div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            arr:['全部','待消费','待评价','退款'],
            suoyin : 0
        }
    },
    methods:{
        handleClick(index){
            this.suoyin = index
        }
    }
}
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    input,button{
        border: 0;
        outline:none;
    }
    .order{
        height: 650px;
        background-color: rgb(239, 243, 247);
    }
    .title{
        height: 40px;
        font-weight: 700;
        text-align: center;
        padding: 20px;
        font-size: 16px;
    }
    .option{
        padding: 0 10px;
        height: 30px;
        margin-top: 20px;
    }
    .option span{
        padding-right: 20px;
    }
    .option span.active{
        font-weight: 700;
        border-bottom: 3px solid blue;
    }
    .tasklist{
        height: 580px;
        overflow: auto;
    }
    ::-webkit-scrollbar{
        display: none;
    }
    .tasklist .item{
        padding: 10px;
        margin: 10px;
        background-color: white;
        border-radius: 5px;
    }
    .tasklist .item .first{
        display: flex;
        justify-content: space-between;
    }
    .tasklist .item .first .name{
        font-weight: 700;
        font-size: 16px;
    }
    .tasklist .item .first :nth-child(2){
        color: gray;
        font-size: 14px;
    }
    .tasklist .item .second{
        display: flex;
        justify-content: space-between;
    }
    .tasklist .item .second .pic img{
        margin-top: 10px;
        width: 60px;
        height: 60px;
        border: 1px solid gray;
        margin-right: 5px;
    }
    .tasklist .item .second .price{
        padding-top: 10px;
    }
    .tasklist .item .second .price .jiage{
        font-weight: 700;
    }
    .tasklist .item .second .price .count{
        color: gray;
        font-size: 12px; 
    }
    .tasklist .item .third{
        color: rgb(85, 192, 235);
        border: 1px solid rgb(85, 192, 235);
        border-radius: 20px;
        width: 90px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        margin-left: 230px;
    }
</style>